<template>
  <div class="chat-container">
    <!-- 导航栏 -->
    <van-nav-bar
      title="小智同学"
      left-arrow
      @click-left="$router.back()"
      fixed
    />
    <!-- /导航栏 -->

    <!-- 消息列表 -->
    <div class="message-list" ref="message-list">
      <div
        class="message-item"
        :class="{ reverse: item % 3 === 0 }"
        v-for="(item, i) in list"
        :key="i"
      >
        <van-image
          class="avatar"
          slot="icon"
          round
          width="30"
          height="30"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
        <div class="title">
          <span>{{ item.message }}</span>
        </div>
      </div>
    </div>
    <!-- /消息列表 -->

    <!-- 发送消息 -->
    <van-cell-group class="send-message">
      <van-field
        v-model="message"
        center
        clearable
      >
        <van-button
          slot="button"
          size="small"
          type="primary"
          @click="onSendMessage"
        >发送</van-button>
      </van-field>
    </van-cell-group>
    <!-- /发送消息 -->
  </div>
</template>

<script>
import io from 'socket.io-client'
import { getItem, setItem } from '@/utils/storage'

export default {
  name: 'chatPage',
  data () {
    return {
      message: '',
      list: getItem('chat-message') || [],
      socket: null
    }
  },

  created () {
    // 建立连接
    const socket = io('http://ttapi.research.itcast.cn')
    // 保存 socket到data中 方便方法访问
    this.socket = socket
    // 连接成功后 触发connect事件
    socket.on('connect', () => {
    })
    // 监听服务端的消息
    socket.on('message', data => {
    })
    // 监听服务端消息 当服务器返回数据的时候 接受后渲染
    socket.on('message', data => {
      this.list.push({
        message: data.msg,
        isMe: false
      })
    })
  },
  // 本地持久化
  watch: {
    list (newValue) {
      setItem('chat-message', newValue)
      this.scrollBottom()
    }
  },

  mounted () {
    // 测试用 想在后台操作list 需要挂在在window上 才能获取
    window.list = this.$refs['message-list']
  },

  methods: {
    onSendMessage () {
      const message = this.message.trim()
      if (!message) {
        return
      }
      this.socket.emit('message', {
        msg: message,
        timestamp: Date.now()
      })
      this.list.push({
        message,
        isMe: true
      })
      this.message = ''
      this.scrollBottom()
    },
    // 希望新发的信息可以在最底下显示 屏幕滚到最下面
    scrollBottom () {
      // 数据更新立即操作dom 需要用$nextTick
      this.$nextTick(() => {
        // 获取消息列表的dom
        const messageList = this.$refs['message-list']
        // 让dom的scrollTop的值等于scrollHeight 肯定是达不到的scrollHeight
        // 达不到时 即为最大值
        messageList.scrollTop = messageList.scrollHeight
      })
    }
  }
}
</script>

<style scoped lang='less'>
.chat-container {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 46px 0 50px 0;
  top: 0;
  left: 0;
  box-sizing: border-box;
  background: #f5f5f6;
  .message-list {
    height: 100%;
    overflow-y: scroll;
    .message-item {
      display: flex;
      align-items: center;
      padding: 10px;
      .title {
        background: #fff;
        padding: 5px;
        border-radius: 6px;
      }
      .avatar {
        margin-right: 5px;
      }
    }
    .reverse {
      flex-direction: row-reverse;
      .title {
        margin-right: 5px;
      }
    }
  }

  .send-message {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f5f5f6 !important;
  }
}
</style>
